<template>
	<view>
		<!-- 		<image src="https://resource-1322700550.cos.ap-shanghai.myqcloud.com/loginPhoto.png" mode="widthFix"
			class="logo"></image> -->

		<p class="title">Register </p>
		<view class="register-container">


			<view class="avatardisplay">
				<text>请选择头像</text>
				<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="avatarUrl"></image>
				</button>
			</view>

			<input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="nickName" @blur="saveName" />
			<!-- <input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="nickName"  /> -->





		</view>


		<view class="register-container">
			<button class="register-btn" open-type="getUserInfo" @click="doregister()">注册</button>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeMount,
		onMounted
	} from 'vue';

	import {
		onLoad
	} from '@dcloudio/uni-app';


	import {
		register,
		uploadAvatar
	} from '../../api/index.js'

	const avatarUrl = ref(
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	)

	const nickName = ref(null);
	const sense = ref(null);

	onLoad((e) => {
		sense.value = e.scene;
	});

	const saveName = ((w) => {
		if (w.detail.value.trim() !== '') {
			nickName.value = w.detail.value;
			console.log("你好", w.detail.value);

		} else {
			console.log("不好啊", w.detail.value);
		}
	});


	const onChooseAvatar = ((e) => {
		// 获取用户微信头像


		uploadAvatar(e.detail.avatarUrl).then(uploadedUrl => {
			let data = JSON.parse(uploadedUrl)
			console.log('头像上传成功，URL:', data.data.url);
			avatarUrl.value = data.data.url;

			// 这里可以更新用户的头像URL等后续操作
		}).catch(error => {
			console.error('头像上传失败:', error);
			// 处理上传失败的情况
		});

	});





	const doregister = ((w) => {
		console.log("Wwwwwwww", w);
		var that = this
		uni.login({
			provider: 'weixin',
			success: function(resp) {

				register({
					wxCode: resp.code,
					sense: sense.value,
					name: nickName.value,
					avatarUrl: avatarUrl.value
				}).then(
					res => {
						uni.showToast({
							title: '注册成功',
							icon: 'success',
							duration: 2000
						});
						setTimeout(function() {
							// 在2秒后跳转到指定页面
							uni.navigateTo({
								url: '/pages/login/login?scene=' +
												sense.value,
							})
						}, 1000);

					}).catch((err) => {

				})
			}


		});
	})
</script>

<style lang="less">
	.logo {
		width: 100%;
		display: block;
		margin-top: 230rpx;
		text-align: center;
		scale: 1.5;
	}

	.avatardisplay {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20px;
	}

	.avatar {
		width: 80px;
		height: 80px;
		padding: 0;
		background: none;
	}

	.avatar image {
		width: 80px;
		height: 80px;
		border-radius: 100px;
	}

	.weui-input {
		width: 90%;
		height: 60px;
		margin: 20px auto;
		background: #eee;
		border-radius: 5px;
		padding-left: 15px;
	}

	.register-container {
		width: 70%;
		margin-top: 110rpx;
		margin-left: auto;
		margin-right: auto;

	}

	.register-btn {
		background-color: blue;
		color: #fff;

		&:active {
			background-color: blue;
		}
	}


	.coolinput {
		display: flex;
		flex-direction: column;
		width: fit-content;
		position: static;
		max-width: 240px;
	}

	.coolinput label.text {
		font-size: 0.75rem;
		color: #818CF8;
		font-weight: 700;
		position: relative;
		top: 0.5rem;
		margin: 0 0 0 7px;
		padding: 0 3px;
		background: #e8e8e8;
		width: fit-content;
	}

	.coolinput input[type=text].input {
		padding: 11px 10px;
		font-size: 0.75rem;
		border: 2px #818CF8 solid;
		border-radius: 5px;
		background: #e8e8e8;
	}

	.coolinput input[type=text].input:focus {
		outline: none;
	}


	.title {
		font-size: 28px;
		color: royalblue;
		font-weight: 600;
		letter-spacing: -1px;
		position: relative;
		display: flex;
		align-items: center;
		padding-left: 70px;
		padding-top: 30px;
	}

	.title::before,
	.title::after {
		position: absolute;
		content: "";
		height: 16px;
		width: 16px;
		border-radius: 50%;
		left: 0px;
		background-color: royalblue;
		margin-left: 40px;
	}

	.title::before {
		width: 18px;
		height: 18px;
		background-color: royalblue;
	}

	.title::after {
		width: 18px;
		height: 18px;
		animation: pulse 1s linear infinite;
	}


	@keyframes pulse {
		from {
			transform: scale(0.9);
			opacity: 1;
		}

		to {
			transform: scale(1.8);
			opacity: 0;
		}
	}
</style>